<template>
	<view class="user">
		<view class="header-bg">
			<image :src="mybg" class="img"></image>
			<view class="title-page">
				<view :style="{ height: statusBarHeight }" class="uni-status-bar">

				</view>
				<view class="title">
					我的
				</view>
			</view>

			<view class="user-options-block" :style="userBlockMarginTop">
				<view class="user-info-block">
					<view class="user-img" v-if="isLogin==true">
						<view class="img">
							<image :src="userInfo.headportrait" style="width: 100%;height: 100%;border-radius: 50%;">
							</image>
						</view>
					</view>
					<view class="name" v-if="isLogin==true">{{userInfo.name}}</view>
					<view class="name" v-if="isLogin==false" @click="wxGetUserProfile">授权登录</view>

				</view>
				<view class="options">
					<view class="item" @tap="pageClick('/pages/integralDetails/integralDetails')">
						<view class="nums">{{userInfo.integral||0}}</view>
						<view class="name">积分</view>
					</view>
					<view class="item" @tap="pageClick('/pages/balance/balance')">
						<view class="nums">{{userInfo.balance/100||0}}</view>
						<view class="name">余额</view>
					</view>
					<view class="item" @tap="pageClick('/pages/myCoupon/myCoupon')">
						<view class="nums">{{userInfo.coupon_count||0}}</view>
						<view class="name">优惠券</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user-content">
			<view class="vip-block">
				<image :src="vipbg" class="vip-bg"></image>
				<view class="btn-block" @tap="pageClick('/pages/vip/vip')">
					查看详情
					<view class="right-icon center">
						<image :src="myRight" class="auto-img"></image>
					</view>
				</view>
			</view>
			<view class="order-block">
				<image :src="bangIcon" class="bang-img"></image>
				<view class="hint-option">
					<view class="title">我的订单</view>
					<view class="look-all" @tap="pageClick('/pages/order/index')">全部订单
						<view class="right-img center">
							<image :src="rightIcon" class="auto-img"></image>
						</view>
					</view>
				</view>
				<view class="item-s">
					<block v-for="(item,index) in orderList" :key="index">
						<view class="item" @tap="pageClick(item.url)">
							<view class="icon">
								<image :src="item.icon" class="auto-img"></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="after-sale-block">
				<view class="hint-title">
					我的服务
				</view>
				<view class="item-s">
					<block v-for="(item,servceIndex) in servceList" :key="servceIndex">
						<template v-if="servceIndex!==5">
							<view class="item" @tap="pageClick(item.path)">
								<view class="icon">
									<image :src="item.icon" class="auto-img"></image>
								</view>
								<view class="name"> {{item.name}}</view>
							</view>
						</template>
						<template v-if="servceIndex==5">
							<button class="item" @tap="pageClick(item.path)" open-type="contact">
								<view class="icon">
									<image :src="item.icon" class="auto-img"></image>
								</view>
								<view class="name"> {{item.name}}</view>
							</button>
						</template>

					</block>
				</view>
			</view>
			<view class="hint-block">
				<view class="hint-title">客服时间:周一至周五,北京时间08:00-20:00</view>
				<view class="hint-title">周六以及节假日,北京时间09:00-18:00</view>
				<view class="hint-title">©版权所有长沙帮你吖网络科技有限公司</view>
			</view>
		 

		</view>
	</view>
</template>
<style>
	page {
		background: #FAFAF5FF;
	}
</style>
<script>
	import tools from '../../../helpYouShop/utils/tools'
	export default {
		data() {
			return {
				myImg: require('@/static/my/my.png'),
				statusBarHeight: 20,
				mybg: require('@/static/my/myBg.png'),
				myRight: require('@/static/my/myRight.png'),
				vipbg: require('@/static/my/vipBg.png'),
				bangIcon: require('@/static/my/bangIcon.png'),
				userBlockMarginTop: '',
				rightIcon: require('@/static/public/rightOption.png'),
				orderList: [{
						icon: require('@/static/my/fukuan.png'),
						name: '待支付',
						url: '/pages/order/index?tabIndex=1'
					},
					{
						icon: require('@/static/my/fahuo.png'),
						name: '待发货',
						url: '/pages/order/index?tabIndex=2'
					},
					{
						icon: require('@/static/my/peiso.png'),
						name: '配送中',
						url: '/pages/order/index?tabIndex=3'
					},
					{
						icon: require('@/static/my/afterSale.png'),
						name: '售后',
						url: '/pages/order/index?tabIndex=0'
					},
				],
				servceList: [{
						icon: require('@/static/my/promotion.png'),
						name: '我的推广',
						path: '/pages/promotion/promotion'
					},
					{
						icon: require('@/static/my/address.png'),
						name: '地址信息',
						path: '/pages/address/address'
					},
					{
						icon: require('@/static/my/coupons.png'),
						name: '优惠券',
						path: '/pages/myCoupon/myCoupon'
					},
					{
						icon: require('@/static/my/coupons.png'),
						name: '积分兑换订单',
						path: '/pages/creditsExchange/creditsExchange'
					},
					{
						icon: require('@/static/my/aboutUs.png'),
						name: '关于我们',
						path: '/pages/tabbar/user/aboutUs'
					},
					{
						icon: require('@/static/my/service.png'),
						name: '联系客服'
					},
					{
						icon: require('@/static/my/setting.png'),
						path: '/pages/tabbar/user/setting/editUser',
						name: '设置'
					},
				 
				],
				isLogin: false,
				userInfo: {},
			}
		},
		onShow() {
			this.init()
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
			let height = (uni.getSystemInfoSync().statusBarHeight * 2) + 88
			this.userBlockMarginTop = `margin-top:${height}rpx`
		},
		methods: {
			init() {
				this.isLogin = this.$tools.isLogin()
				if (this.isLogin == true) {
					this.getUserInfo()
				} else {
					this.isLogin = false
					this.userInfo = {}
				}
				var self = this;
				if (!this.isLogin) {
					this.$tools.showMsg('请你先授权登录')
					setTimeout(function() {
						self.wxGetUserProfile()
					}, 2000);
				}
				
				
			},
			pageClick(url) {
				this.loginIsShow().then(res => {
					let isBindMible = this.$tools.isBindMible()
					if (res == true || isBindMible) {
						uni.navigateTo({
							url
						})
					} else {
						this.$tools.showMsg('请你先授权绑定手机号')
						setTimeout(res => {
							uni.navigateTo({
								url: '/pages/tabbar/user/setting/editUser'
							})
						}, 600)
					}
				})
			},
			loginIsShow() {
				return new Promise((resolve, reject) => {
					if (this.$tools.isLogin() == true) {
						resolve(true)
					} else {
						this.$tools.showMsg('请授权登录')
						this.$tools.logOut()
						this.isLogin = false
						this.userInfo = {}
					}
				})
			},
			wxGetUserProfile() {
				uni.navigateTo({
					url:'/pages/tabbar/login/login'
				})
				return
				uni.showLoading({
					mask: true,
					title: '登录中...'
				})
				let code;
				let self = this
				uni.login({
					provider: 'weixin',
					success(login) {
						code = login.code
					},
					fail: (err) => {
						uni.hideLoading()
						self.$tools.showMsg('取消登录')
					}
				})
				
				// desc: '用于完善会员资料'  必填 声明获取用户个人信息后的用途，后续会展示在弹窗中
				uni.getUserProfile({
					desc: '用于完善用户资料',
					lang: 'zh_CN',
					success(user) {
						console.log('user', user)

						//微信登录  
						const data = {
							code: code,
							nickName: user.userInfo.nickName,
							avatar: user.userInfo.avatarUrl,
						}

						self.wxLogin(data)
					},
					fail(err) {
					 
						uni.hideLoading()
						self.$tools.showMsg('取消登录')
						 
					}
				})
			},
			//授权登录
			wxLogin(data) {
				let superior_id =uni.getStorageSync('superior_id')||''
				let superior_type = 0
				this.$http('common.wxLogin', {
					...data,
					superior_id:superior_id,
					superior_type: '',
				}).then(res => {
					 
					let result = res
					uni.setStorageSync('token', result.data.token)
					this.getUserInfo()
					this.$tools.showMsg('登录成功')
					uni.hideLoading()
				})
			},
			getUserInfo() {
				this.$http('common.getUserInfo', {
					token: this.$tools.getToken()
				}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data.userData
						uni.setStorageSync('userInfo', this.userInfo)
						this.isLogin = true
					}
					if (res.code == 422) {
						this.isLogin = false
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-bg {
		position: relative;
		width: 100%;
		height: 580rpx;

		.img {
			position: absolute;
			z-index: 11;
			width: 100%;
			height: 580rpx;
			pointer-events: auto;
		}


		.title-page {
			position: fixed;
			width: 100%;
			z-index: 999;

			.uni-status-bar {
				height: 20px;
			}

			.title {
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				height: 88rpx;
				color: rgba(0, 0, 0, 1);
			}
		}

		.user-options-block {
			position: absolute;
			left: 47rpx;
			right: 0;
			z-index: 111;
		}

		.user-info-block {
			display: flex;
			align-items: center;
			height: 138rpx;

			.user-img {
				width: 130rpx;
				height: 130rpx;
				background: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.name {

				margin-left: 32rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 100);
			}
		}

		.options {
			width: 520rpx;
			margin-top: 40rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {

				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.nums {
					font-size: 36rpx;
					font-weight: 700;
					color: rgba(0, 0, 0, 1)
				}

				.name {
					margin-top: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}
		}



	}

	.user-content {

		position: relative;
		top: -80rpx;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.vip-block {
		width: 702rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		height: 156rpx;
		position: relative;
		z-index: 11rpx;



		.vip-bg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 702rpx;
			height: 100%;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			z-index: 22rpx;
		}

		.btn-block {
			position: absolute;
			right: 46rpx;
			top: 60rpx;
			width: 194rpx;
			height: 60rpx;
			display: flex;
			z-index: 33rpx;
			align-items: center;
			justify-content: center;
			background: linear-gradient(90deg, rgba(248, 229, 171, 1) 0%, rgba(248, 238, 199, 1) 100%);
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(110, 67, 21, 1);
			border-radius: 332rpx;

			.right-icon {
				margin-left: 12rpx;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
			}
		}
	}

	.order-block {
		position: relative;
		top: -20rpx;
		width: 702rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx 16rpx 8rpx 8rpx;
		height: 240rpx;
		padding: 0 24rpx;
		box-sizing: border-box;

		.bang-img {
			position: absolute;
			width: 114rpx;
			height: 164rpx;
			right: 0;
			z-index: 666;
			top: -284rpx;
		}

		.hint-option {
			padding-top: 24rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			.title {
				flex: auto;

			}

			.look-all {
				display: flex;
				align-items: center;
				flex: none;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(194, 189, 174, 1);

				.right-img {
					margin-left: 8rpx;
					width: 12rpx;
					height: 22rpx;

				}
			}
		}

		.item-s {
			padding: 0 24rpx;
			margin-top: 44rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;


			}

			.icon {
				width: 46rpx;
				height: 46rpx;
			}

			.name {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}

			.item-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: none !important;
				border-radius: none !important;
				padding: 0 !important;
				margin: 0 !important;
			}
		}
	}

	.after-sale-block {
		margin-top: 24rpx;
		width: 702rpx;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 38rpx;
		box-sizing: border-box;

		.hint-title {
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			padding: 26rpx 24rpx 0 26rpx;
		}

		.item-s {

			display: flex;
			flex-wrap: wrap;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 40rpx;
				width: 25%;

				.icon {
					width: 56rpx;
					height: 56rpx;
				}

				.name {
					margin-top: 12rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}
			}
		}
	}

	.hint-block {

		width: 702rpx;
		font-size: 26rpx;
		color: #ABABAB;
		background: #fff;

		margin-top: 24rpx;
		box-sizing: border-box;
		padding: 24rpx;

		.hint-title {
			margin-top: 12rpx;
			text-align: center;
		}
	}
</style>
